<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setState 更新状态</title>
</head>
<body>
  <div id="root"></div>
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">
    class Demo extends React.Component {
      state = {
        isHot: true
      }

      changeWeather = () => {
        // 更新了一次
        this.setState({
          isHot: !this.state.isHot
        })

        // 想要更新第二次
        // 这里并不能立即获取到 state 更新后的值，可以看出 setState 是异步更新的
        // this.setState({
        //   isHot: !this.state.isHot
        // })
        // 想要解决 setState 是异步更新且不能立即获取到更新后的值的问题，可以使用回调函数的方式
        this.setState((state, props) => {
          // 这里可获取到上个 state 更新后的值
          console.log('第一次:', state, props)
          return {
            // 我再这里可立即获得 状态更新后的值
            isHot: !state.isHot
          }
        })
        this.setState((state, props) => {
          // 这里可获取到上个 state 更新后的值
          console.log('第二次:', state, props)
          return {
            // 我再这里可立即获得 状态更新后的值
            isHot: !state.isHot
          }
        })
      }

      render() {
        const { isHot } = this.state
        return (
          <div>
            <h2>这天气好 { isHot ? '炎热' : '凉爽' }</h2>
            <button onClick={ this.changeWeather }>改变天气</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('root'))
  </script>
</body>
</html>